<template>
  <ve-card :title="title" class="order-summary-pane" :fold="summaryList.length > 2" v-bind="$attrs">
    <template #forever-show v-if="summaryList.length > 2">
      <ve-cell :label="item.label" v-for="(item, index) in summaryList.slice(0, 2)" :key="index">
        <slot :name="item.slotName" v-if="item.slotName"></slot>
        <template v-else>{{ item.value != null ? item.value : '-' }}</template>
      </ve-cell>
    </template>
    <template v-if="summaryList.length > 2">
      <ve-cell :label="item.label" v-for="(item, index) in summaryList.slice(2)" :key="index">
        <slot :name="item.slotName" v-if="item.slotName"></slot>
        <template v-else>{{ item.value != null ? item.value : '-' }}</template>
      </ve-cell>
    </template>
    <template v-else>
      <ve-cell :label="item.label" v-for="(item, index) in summaryList" :key="index">
        <slot :name="item.slotName" v-if="item.slotName"></slot>
        <template v-else>{{ item.value != null ? item.value : '-' }}</template>
      </ve-cell>
    </template>
    <slot></slot>
  </ve-card>
</template>

<script setup>
  const props = defineProps({
    title: {
      type: String,
      default: '租赁信息',
    },
    summaryList: {
      type: Array,
      default: () => [],
    },
  })
</script>

<style lang="less" scoped>
  .order-summary-pane {
    :deep {
      .field-label {
        width: 200px;
        display: inline-block;
        text-align: right;
      }
    }
  }
</style>
